<template>

    <div :style="{top:top,left:left}">

        <div :class="{right:isright}" v-if="hasarrow"></div>

        <components :is='current' @select="select" @selectTime="selectTime" :timestamp="timestamp" :value="value"

                    :splitTag="splitTag" :required="required" :isWeek="isWeek" :sameable="sameable" :range="range"></components>

    </div>

</template>

<script>
/**

     * 日历组件

     * 一、显示部分

     * 1、type 选择日期（date）、选择月份（month）

     */

import pickerdate from "./datepicker-date.vue";

import pickermonth from "./datepicker-month.vue";

import pickerrange from "./datepicker-range.vue";

import timerange from "./datepicker-timerange.vue";

export default {
  name: "datpicker",

  components: {
    pickermonth,

    pickerdate,

    pickerrange,

    timerange
  },

  data() {
    return {
      current: "",

      format: "",

      value: "",

      timestamp: 0,

      splitTag: "",

      required: false,

      left: 0,

      top: 0,

      hasarrow: false,

      isright: false,

      isWeek: false,

      sameable: false,

      range: 0 // 日期范围
    };
  },

  mounted() {
    var vm = this;

    //注册显示日历事件

    $(document).on("click", "[datepicker]", function(ev) {
      vm.top = 0;

      vm.left = 0;

      var el = this.parentElement;

      if (
        el.hasClass("open") ||
        $(ev.target)
          .closest(".icon")
          .hasClass("icon-delete")
      ) {
        vm.resetDatepicker && vm.resetDatepicker();

        return;
      }

      var type = el.getAttribute("type");

      vm.current =
        type == "month"
          ? "pickermonth"
          : type == "range"
            ? "pickerrange"
            : type == "timerange" ? "timerange" : "pickerdate";

      vm.activeElem = el;

      var config = App.datepicker();

      vm.format = el.getAttribute("format") || config.format;

      vm.splitTag = el.getAttribute("split") || config.split;

      vm.value = el.getAttribute("beforevalue");

      vm.required = !!el.getAttribute("required");

      vm.sameable = !!el.getAttribute("sameable");

      vm.range = el.getAttribute("range");

      vm.isWeek = type == "week";

      vm.timestamp = +new Date();

      el.addClass("open");

      el.appendChild(vm.$el);

      var hasarrow = (vm.hasarrow = el.getAttribute("arrow"));

      vm.$nextTick(function() {
        var h = vm.$el.clientHeight,
          w = vm.$el.clientWidth;

        //计算位置

        var $el = $(el),
          bodySize = getBodySize(),
          offset = $el.offset();

        var top = offset.top + $el.height() + 1 + (hasarrow ? 6 : 0),
          left = offset.left;

        if (w + left > bodySize.width) {
          left -= w - $el.width() + (hasarrow ? -21 : 0);

          vm.isright = true;
        } else {
          left = offset.left + (hasarrow ? -21 : 0);

          vm.isright = false;
        }

        if (h + top > bodySize.height && !hasarrow) {
          //带箭头，并且在上面显示的，暂不处理

          top -= h + $el.height() + 3;
        }

        vm.top = top;

        vm.left = left;

        el.querySelector("[focusabled]") &&
          el.querySelector("[focusabled]").focus();
      });

      function resetDatepicker() {
        el.removeClass("open");

        vm.current = "";

        vm.removeDocumentCaptureOnce && vm.removeDocumentCaptureOnce();

        vm.removeWheelListener && vm.removeWheelListener();

        vm.removeFromWinResize && vm.removeFromWinResize();

        vm.removeDocumentCaptureOnce = null;

        vm.removeFromWinResize = null;

        vm.resetDatepicker = null;

        vm.removeWheelListener = null;
      }

      function mouseWheelHandler(ev) {
        if (vm.activeElem && !vm.$el.contains(ev.target)) {
          resetDatepicker();
        }
      }

      vm.removeDocumentCaptureOnce = documentCaptureOnce(
        [el, vm.$el],
        resetDatepicker,
        "mousedown"
      );

      vm.removeWheelListener = addWheelListener(
        document,
        mouseWheelHandler,
        true
      );

      vm.removeFromWinResize = addToWinResize(resetDatepicker);

      vm.resetDatepicker = resetDatepicker;
    });
  },

  methods: {
    select(date, date2) {
      console.log("===select===");

      var vm = this;

      var val = date.formatAsDate(vm.format);

      if (date2) {
        val += vm.splitTag + date2.formatAsDate(vm.format);
      }

      var ev = document.createEvent("Event");

      ev.initEvent("changeDate", true, true);

      var input = vm.activeElem.querySelector(".datepicker-input");

      App._datepickerValue = val;

      input.dispatchEvent(ev);

      // // 移除输入框的样式类

      vm.resetDatepicker();
    },

    selectTime(time1, time2) {
      console.log("===select===");

      var vm = this;

      var ev = document.createEvent("Event");

      ev.initEvent("changeDate", true, true);

      var input = vm.activeElem.querySelector(".datepicker-input");

      App._datepickerValue = time1 + vm.splitTag + time2;

      input.dispatchEvent(ev);

      // // 移除输入框的样式类

      vm.resetDatepicker();
    }
  },

  created() {
    App.extend({
      _datepickerConfig: {
        format: "yyyy-MM-dd",

        split: "~"
      },

      datepicker(config) {
        if (config) {
          App._datepickerConfig = config;
        } else {
          return App._datepickerConfig;
        }
      }
    });

    App.getDatepickervalue = function() {
      var val = App._datepickerValue || "";

      App._datepickerValue = "";

      return val;
    };

    var vm = this;

    //提前获取上课时间

    var times = this.$store.getters.getCourseTimeList();
  }
};
</script>

<style>
.datepicker.open > .date-picker {
  display: block;
}

.date-picker {
  font-size: 12px;

  user-select: none;

  position: fixed;

  top: calc(100% + 1px);

  z-index: 2;

  left: 0;

  display: none;

  > .arrow {
    position: absolute;

    display: block;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid;

    border-width: 6px;

    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));

    top: -6px;

    left: 20px;

    margin: 0 auto;

    border-top-width: 0;

    border-bottom-color: #ebeef5;

    &.right {
      left: auto;

      right: 20px;

      &:after {
      }
    }

    &:after {
      position: absolute;

      display: block;

      width: 0;

      height: 0;

      border-color: transparent;

      border-style: solid;

      content: " ";

      border-width: 6px;

      top: 1px;

      margin-left: -6px;

      border-top-width: 0;

      border-bottom-color: #fff;
    }
  }
}

.date-picker-list {
  width: 230px;

  overflow: hidden;

  /*border: 1px solid #D7DCE6;*/

  background: #ffffff;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  border-radius: 4px;
}

.date-picker .date-toolbar {
  border-bottom: 1px solid #d7dce6;
}

.date-picker .date-toolbar .icon-btn {
  margin: 0 2px;
}

.date-picker .current-date-info {
  display: inline-block;

  /*width: calc(100% - 112px);*/

  width: 98px;

  text-align: center;

  line-height: 24px;
}

.date-picker .date-picker-content {
  width: 230px;

  margin: 0;

  overflow: hidden;

  padding: 10px 10px 10px;

  line-height: normal;

  border-bottom: 1px solid #d7dce6;
}

.date-picker li {
  list-style: none;

  float: left;

  text-align: center;

  margin: 0 4px;
}

.date-picker .date-list {
  padding: 0 10px 10px 10px;
}

.date-picker .week-list {
  border-bottom: none;
}

.date-picker-days {
  width: 22px;

  line-height: 20px;

  border-radius: 2px;

  text-align: center;

  line-height: 20px;

  background: #ffffff;

  color: #333333;

  border: 1px solid #ffffff;

  display: inline-block;

  margin: 0 4px;

  cursor: pointer;
}

.date-picker .week-list li {
  width: 22px;

  line-height: 20px;

  border-radius: 2px;

  text-align: center;

  background: #ffffff;

  color: #333333;

  border: 1px solid #ffffff;
}

.date-picker .date-picker-days.weekDay {
  color: #ff7b4d;
}

.date-picker .week-list li {
  color: #999999;
}

.date-picker .month-list li,
.date-picker .year-list li {
  transition: ease-in-out 0.3s;

  line-height: 40px;

  width: 40px;

  margin: 6px;
}

.date-picker .month-list li:hover,
.date-picker .month-list li.active,
.date-picker .year-list li:hover,
.date-picker .year-list li.active {
  background: #d7dce6;
}

.date-picker .date-picker-days:hover,
.date-picker .date-picker-days.hover {
  background: #f1f5ff;

  border-color: #f1f5ff;
}

.date-picker .date-picker-days.empty-day:hover {
  background: none;

  color: #ffffff;

  border-color: #ffffff;
}

.date-picker .date-picker-days.today {
  background: #ffffff;

  color: #3673ff;

  border-color: #3673ff;
}

.date-picker .date-picker-days.active {
  background: #3673ff;

  color: #ffffff;

  border-color: #ffffff;
}

.date-picker .date-picker-days.otherM {
  color: #999999;

  background: #fff;
}

.date-picker .button-toolbar {
  padding: 10px 10px 10px;

  border: none;
}

.date-picker .button-toolbar .btn {
  height: 28px;

  padding: 0 9px;

  border: 1px solid #d7dce6;

  color: #333333;

  line-height: 26px;

  outline: none;

  display: inline-block;

  float: left;

  margin-left: 10px;

  background: #ffffff;

  min-width: inherit;
}

.date-picker .button-toolbar .btn:hover {
  color: #3673ff;
}

.date-picker .button-toolbar .quiky-select {
  width: 18px;

  height: 18px;

  border: 1px solid #d7dce6;

  padding: 0;

  margin: 5px 0;
}
</style>

